<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2021-12-06 09:43:19
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 14:05:55
 * @Description: 下拉刷新，上拉加载组件,
                 在被引入的父组件中，需要使用”provide“ 周期返回一个方法，使用方法与”data“周期一致
                 data(){
                   return:{
                     ...
                   }
                 },
                 provide(){
                   return{
                     getData:this.getList //! 该方法必须放回一个Promise
                   }
                 }
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 
 * @callBack:
-->
<template>
  <scroll-view scroll-y refresher-enabled :refresher-triggered="scrowll_refreshing" @refresherrefresh="refresh"
    @refresherrestore="scrowll_refreshing = false" @refresherabort="scrowll_refreshing = false" @scrolltolower="getMore"
    @scrolltoupper="clearMore" :style="contentHeight">
    <view class="scrollStatus" v-if="scrowll_refreshing">正在刷新，请稍后~</view>
    <!--//! 内容插槽 -->
    <slot name="scrollView_content" class="scrollContent"></slot>

    <view class="scrollStatus" v-if="scroll_loadMore">正在获取更多，请稍后~</view>
    <view class="scrollStatus" v-if="scorll_noMore">暂无更多数据</view>
  </scroll-view>
</template>
<script>
export default {
  name: "components_scrollY",
  inject: ["getData"],
  props: {
    pageNo: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    listContainerHeight: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 0,
    }
  },
  computed: {
    // 内容页的 最小高度 100vh - 顶部自定义标题栏 - 顶部搜索 - 底部按钮
    contentHeight() {
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      // 顶部自定义导航栏高度
      const actionBarHeight =
        uni.getStorageSync("menuInfo").actionBarHeight + 40;
      if (navigationBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + this.height + navigationBarHeight) +
          "px);"
        );
      } else {
        return this.height ? `height:calc(100vh - ${this.height}rpx);` : "height:calc(100vh - 160rpx);";
      }
    },

    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },

    // 底部新增按钮padding掉导航栏的位置
    paddingBottom() {
      console.log(this.navigationBarHeight);
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px;";
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      /*
        滚动组件的状态：
          下拉 刷新中，需要在刷新完成时关闭该事件，
          上拉 加载中，需要在加载完成时关闭该事件， //! 需要在回调函数中处理相应的搜索条件，如页码
          上拉时 根据当前数据的页码与搜索条件中的页码比对，相同时开启
      */
      scrowll_refreshing: false,
      scroll_loadMore: false,
      scorll_noMore: false,
      loading: false
    };
  },
  methods: {
    //! 自定义下拉被触发 刷新事件
    refresh() {
      this.scrowll_refreshing = true;

      if (this.loading) {
        this.closeLoading()
        return
      }

      this.loading = true
      this.$emit("refresh");
      this.doParent_getData();
    },

    // 滚动到最底部
    getMore() {
      this.scroll_loadMore = true;

      if (this.loading) {
        this.closeLoading()
        return
      }

      this.loading = true
      this.$emit("getMore");
      if (this.pageSize * this.pageNo <= this.total) {
        this.doParent_getData("scroll_loadMore");
      }
    },

    // 滚动到顶部 清空多余的释放内存
    clearMore() {
      this.$emit("clearMore");
    },

    /*
      执行父组件的调取接口的方法
      variableName:this中的变量，需要在获取完数据后更改
    */
    doParent_getData(variableName) {
      return new Promise((reslove, reject) => {

        if (this.loading) {
          this.closeLoading()
          reject()
        }

        this.loading = true
        // 如果传入了获取数据的方法，则调取,否则关闭刷新动画
        try {
          if (this.getData && typeof this.getData === "function") {
            // 根据返回的数据判断 是否还有更多数据
            this.getData()
              .then((res) => {
                if (this.pageNo * this.pageSize >= res.total) {
                  this.scorll_noMore = true;
                } else {
                  this.scorll_noMore = false;
                }
              })
              .finally(() => {
                this.closeLoading()
                reslove(true);
              });
          } else {
            reject("没有获取数据的方法");
          }
        } catch (error) {
          this.closeLoading()
          reject(error);
        }
      })
        .catch((err) => {
          console.log(err);
          variableName ? (this[variableName] = false) : null;
          this.closeLoading();
        })
        .finally(() => {
          variableName ? (this[variableName] = false) : null;
          this.closeLoading();
        });
    },

    // 关闭加载动画，及时关闭会关不掉，所以需要动画先转几圈
    closeLoading() {
      let timer = setTimeout(() => {
        this.scrowll_refreshing = false;
        this.scroll_loadMore = false
        this.loading = false
        clearTimeout(timer);
      }, 2000);
    },
    // 自定义下拉刷新被复位
    // refresherrestore () {
    //   console.log("自定义下拉刷新被复位");
    //   this.scrowll_refreshing = false;
    // },

    // 自定义下拉刷新被中止
    // refresherabort () {
    //   console.log("自定义下拉刷新被中止	");
    //   this.scrowll_refreshing = false;
    // },
  },
};
</script>
<style lang="scss" scoped>
.scrollStatus {
  background: white;
  line-height: 60rpx;
  text-align: center;
  position: relative;
  width: 100%;
  color: #333;
}
</style>
